<template>
    <div class="online-edit-vue">
        <div ref="container" class="container" id="container"></div>
        <button class="button" @click="handleRun">运行</button>
        <div class="result" ref="result">
            <demo-comp />
        </div>
    </div>
</template>
<script>
import * as monaco from 'monaco-editor'
import { tmpl } from './tmpl'
// import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';

export default {
    name: 'OnlineEditVue',
    data() {
        return {
            monacoInstance: null,
            tmpl
        }
    },
    mounted() {
        this.initEditor()
    },
    methods: {
        initEditor() {
            this.monacoInstance = monaco.editor.create(this.$refs.container, {
                value: tmpl,
                language: 'vue',
                minimap: {
                    enabled: false
                },
                // theme: 'vs',
                // selectOnLineNumbers: true,
                roundedSelection: false,
                // cursorStyle: 'line',
                // automaticLayout: false,
                // glyphMargin: true,
                // useTabStops: false, 
                fontSize: 16,
                autoIndent: false
            })
        },
        handleRun() {
            console.log(this.monacoInstance.getModel().getValue())
        }
    }
}
</script>
<style lang="less" scoped>
    .online-edit-vue {
        display: flex;
        width: 100%;
        height: 100%;
        padding-top: 24px;
        // align-items: center;
        >div {
            flex: 1;
            height: 90vh;
            
        }
        .result {
            border: 1px solid #d5d5d5;
        }
        .button {
            height: 50px;
            width: 80px;
            margin: 12px;
            // background-color: 
        }
        
    }
   
</style>